<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            border-radius: 18px;
            width: 76px;
            height: 38px;
        }

        img {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>

    <p>
    <h1>首页</h1>
    </p>
    商品名称<input type="text">
    商品库存<input type="text">
    商品价格<input type="text">
    商品状态<input type="text">
    商品以受<input type="text">
    商品图片<input type="text">
    <button onclick="tian()">添加</button>
    <input type="text" class="xrr">
    <button onclick="sou()">搜素</button>
    <select>
        <option>请选择要排序的商品</option>
        <option>价格</option>
        <option>库存</option>
        <option>已售</option>
    </select>
    <select>
        <option>请选择排序方式</option>
        <option>从大到小</option>
        <option>从小到大</option>
    </select>

    <table border="1">
        <thead>
            <tr>
                <th>商品id</th>
                <th>商品名称</th>
                <th>库存</th>
                <th>价格</th>
                <th>状态</th>
                <th>已售</th>
                <th>图片</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <button onclick="tui()">退出登录</button>
    <script>

        var tbody = document.querySelector("tbody")
        // 渲染
        function xr() {
            tbody.innerHTML = ""//初始化 
            var xhr = new XMLHttpRequest()
            xhr.open('GET', 'https://liu.zzgoodqc.cn/goodsx/goodslist')
            xhr.send()
            xhr.onload = () => {
                var a = JSON.parse(xhr.response).data
                a.forEach(item => {
                    tbody.innerHTML += `
              <tr> 
                    <td>${item.id}</td>
                    <td>${item.goods_name}</td>
                    <td>${item.stock}</td>
                    <td>${item.price}</td>
                    <td>${item.status}</td>
                    <td>${item.sold}</td>
                    <td> <img src="${item.img}" alt=""></td>
                    <td><button onclick='shan(${item.id})'>删除</button>
                    <button>修改</button> 
                    <button>详情</button></td>
              </tr>
              `
                });
            }
            xhr.onerror = (eer) => {
                console.log(eer);
            }

        } xr()
        // 添加
        var inp1 = document.querySelectorAll('input')[0]
        var inp2 = document.querySelectorAll('input')[1]
        var inp3 = document.querySelectorAll('input')[2]
        var inp4 = document.querySelectorAll('input')[3]
        var inp5 = document.querySelectorAll('input')[4]
        var inp6 = document.querySelectorAll('input')[5]
        function tian() {
            var xhr = new XMLHttpRequest()
            xhr.open('post', 'https://liu.zzgoodqc.cn/goodsx/add')
            xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
            var obj = {
                goods_name: inp1.value,
                stock: inp2.value,
                price: inp3.value,
                status: inp4.value,
                sold: inp5.value,
                img: inp6.value,
            }
            xhr.send(JSON.stringify(obj))
            xhr.onload = () => {
                xr()

            }
            xhr.onerror = (a) => {
                console.log(a);

            }
        }
        // 删除
        function shan(i) {
            var xhr = new XMLHttpRequest()
            xhr.open('get', 'https://liu.zzgoodqc.cn/goodsx/delete?id=' + i)
            xhr.send()
            xhr.onload = (x) => {
                console.log(x);
                xr()
            }
            xhr.onerror = (a) => {
                console.log(a);
            }
        }
        // 搜素
        function sou() {
            var xhr = new XMLHttpRequest()
            xhr.open()
            xhr.send()
            xhr.onload = () => {

            }
            xhr.onerror = (a) => {
                console.log(a);

            }
        }

        // 排序
        function pai() {
            var xhr = new XMLHttpRequest()
            xhr.open()
            xhr.send()
            xhr.onload = () => {
            
            }
            xhr.onerror = () => {
                 
            }
        }

        //  退出登录
        function tui() {
            location.assign("./6.3.项目.html")

        }

    </script>

</body>

</html>